import React from 'react'
import ReacDOM from 'react-dom'
import './index.css'

class App extends React.Component {

    constructor(props) {
        super(props)
    }
    // 初始化状态
    state = {
        comments: [
            { id: 1, name: 'jack', content: '沙发' },
            { id: 2, name: 'rose', content: '板凳' },
            { id: 3, name: 'tom', content: '楼主好人' },
        ],
        // 评论人
        userName: '',
        // 评论内容
        userContent: ''
    }
    // 渲染列表
    renderList = () => {
        const { comments } = this.state
        if (comments.length === 0) {
            return (
                <div className='no-content'>
                    暂无评论，快去评论吧~~
                </div>
            )
        }
        return (<ul>
            {
                comments.map(item => (
                    <li key={item.id}>
                        <h3>评论人:{item.name}</h3>
                        <p>评论内容:{item.content}</p>
                    </li>
                ))
            }
        </ul>)
    }

    // 处理表单元素值
    handleForm = e => {
        const { name, value } = e.target
        this.setState({
            [name]: value
        })
    }
    // 添加评论
    addComment = e=>{
        const {userName,userContent,comments} = this.state
        // 非空校验
        if(userName.trim()==="" || userContent.trim()===''){
            alert('请输入评论人和评论内容')
            return 
        }
        const newComments = [{
            id:Math.random(),
            name:userName,
            content:userContent
        },...comments]

        this.setState({
            comments:newComments,
            userName:'',
            userContent:''
        })
       
    }
    render() {
        const { userName, userContent } = this.state
        return (
            <div className='app'>
                <div>
                    <input className='user' type='text' placeholder='请输入评论人' value={userName}
                        name='userName' onChange={this.handleForm} />
                    <br />
                    <textarea className='content' cols="30" rows="10" placeholder='请输入评论内容'
                        value={userContent} name='userContent'
                        onChange={this.handleForm}></textarea>
                    <br />
                    <button onClick={this.addComment}>发表评论</button>
                </div>
                {this.renderList()}

                {/* 条件渲染 */}
                {
                    // this.state.comments.length > 0 ? (<ul>
                    //     {
                    //         this.state.comments.map(item => (
                    //             <li key={item.id}>
                    //                 <h3>评论人:{item.name}</h3>
                    //                 <p>评论内容:{item.content}</p>
                    //             </li>
                    //         ))
                    //     }
                    // </ul>) :
                    //     (<div className='no-content'>
                    //         暂无评论，快去评论吧~~
                    //     </div>)

                }
            </div>
        )
    }
}

ReacDOM.render(<App />, document.getElementById('root'))